<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>预付金支付</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/prepaid.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/gVerify.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="my.html" class="mui-icon mui-icon-left-nav mui-pull-left" style="color: #000;"></a>
			<h1 class="mui-title">预付金支付</h1>
			<a href="refund" class="mui-icon mui-pull-right" style="font-size: 0.3rem;line-height: 30px;color: #27CCBA;">退款记录</a>
		</header>
		<div class="content">
			<div class="money">
				<p>预付金</p>
				<span>1000</span>￥
			</div>
			<p class="prompt">平台交易手续费比例：3‰ 说明：钱包账户每产生一笔利润，我们收取3‰手续费，预付金余额为0时，我们将不再工作。平台预付金最少充值金额为30元。
			</p>
			<button class="recharge">充值</button>
			<button class="returnMoney">退还预付金</button>
		</div>
		<div>
			<div class="mask"></div>
			<!--
            	作者：18291958857@163.com
            	时间：2019-01-28
            	描述：预付金支付
            -->
			<div class="prepaid">
				<div class="flexStart" style="border-bottom: 1px solid #ECECEC;">
					<h4>预付金支付</h4>
					<img class="close" src="img/icon/guanbi@2x.png" />
				</div>
				<ul class="prepaidIn">
					<li class="flexStart">
						金额：
						<input type="number" id="" value="" />
					</li>
					<li class="flexStart">
						支付：
						<span></span>
						<img src="img/icon/zhifubao@2x.png"/>
					</li>
					<li>
						<button>提交</button>
					</li>
				</ul>
			</div>
			<!--
            	作者：18291958857@163.com
            	时间：2019-01-29
            	描述：退还预付金
            -->
            <div class="prepaidT">
				<div class="flexStart" style="border-bottom: 1px solid #ECECEC;">
					<h4>退还预付金</h4>
					<img class="close" src="img/icon/guanbi@2x.png" />
				</div>
				<ul class="prepaidIn">
					<li class="flexStart">
						要退款金额：
						<input type="number" id="" value="" />
					</li>
					<li class="flexStart">
						支付宝账号：
						<input type="number" id="" value="" />
					</li>
					<li>注：我们会在三个工作日日退换到您的支付宝账号</li>
					<li>
						<button>提交</button>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
		    //充值
		    $('.recharge').on('tap',function(){
		    	$('.mask').show();
		    	$('.prepaid').show();
		    })
		    //关闭
		     $('.close').on('tap',function(){
		    	$('.mask').hide();
		    	$('.prepaid').hide();
		    	$('.prepaidT').hide();
		    })
		    //退还预付金
		     $('.returnMoney').on('tap',function(){
		    	$('.mask').show();
		    	$('.prepaidT').show();
		    })
		</script>
	</body>

</html>